<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h3>姓名(单值)、年龄(单值)、爱好(数组)、女朋友(对象)、豪车(对象数组)</h3>	
		<div id="app">
			<h4>姓名:{{name}}</h4>
			<h4>年龄:{{age}}</h4>
			<h4>爱好1:{{hobby[0]}}</h4>
			<h4>爱好2:{{hobby[1]}}</h4>
			<h4>爱好3:{{hobby[hobby.length-1]}}</h4>
			<h4>女朋友姓名:{{girl.name}}</h4>
			<h4>女朋友年龄:{{girl.age}}</h4>
			<h4>第一辆豪车:{{cars[0].name}}</h4>
			<h4>第一辆豪车颜色:{{cars[0].color}}</h4>
			<h4>第二辆豪车:{{cars[1].name}}</h4>
			<h4>第二辆豪车颜色:{{cars[1].color}}</h4>
			<h4>第三辆豪车:{{cars[2].name}}</h4>
			<h4>第三辆豪车颜色:{{cars[2].color}}</h4>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"hello VueJS!",
				name:"陈强",//字符串类型两边使用双引号或者单引号
				age:18, //整数直接写
				hobby:["乒乓球","爬山","唱歌"],//字符串数组
				girl:{
					name:"李梅",
					age:16	
				},
				cars:[
				{name:"劳斯莱斯",color:"white"},
				{name:"奔弛",color:"red"},
				{name:"宝马",color:"green"}
				]
			}
		})
	</script>
</html>
